
<!doctype html>

<html>

 <head>

  <title>WarGames Simulation</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
  <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">



   //populate "all actions" list
   
   function getAllActions() {

      $('#allactions').html("");

      $('#loadingactions').show();

      $.ajax({

	  
            url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions",

            type: "GET",

            dataType: "json",

            success: function(data, textStatus, jqXHR) {

               $('#loadingactions').hide();

               var html = "<table>";

               for(var x = 0; x < data.length; x++) {

                  html += "<tr>";
                  html += "<td><a class=\"action\" href=\"#" + data[x]._id + "\" onclick=\"getAction(" + data[x]._id + ")\">" + data[x].name + "</a></td>";
                  html += "<td><a class=\"error\" href=\"#" + data[x]._id + "\" onclick=\"delAction(" + data[x]._id + ")\">(delete)</a></td>";
                  html += "</tr>";
               }

               html += "</table>";

               $('#allactions').html(html);
			   

            }

      });

   }

   $(getAllActions);

   

   var currentID = 1;
   function getAction(id) 
   {   
		   
	  currentID = id;
      $('#loadingaction').show();

      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions/" + id,

         type: "GET",

         dataType: "json",

         success: showAction

      });

   }

   function showAction(data, textStatus, jqXHR) {

      $('#loadingaction').hide();

      $('#name').val(data.name);

      $('#description').val(data.description);

      //gotta put in stuff to display all the state transitions

      $('tr.transition').remove();

      for(x in data) {

         if(x == "_id" || x == "_rev" || x == "description" || x == "name")
            continue;

         $('#actiondata').append(
               "      <tr class=\"transition\">\n" +
               "       <td>" + x + "</td>\n" + 
               "       <td>&rarr;</td>\n" + 
               "       <td>" + data[x] + "</td>\n" +
               "      </tr>\n");
      }

   }

   function delAction(id) {
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions/" + id,
         type: "DELETE",
         success: function(data, textStatus, jqXHR) {
            getAllActions();
         }
      });
   }

   function createNew() {

      var wnd = window.open("createAction.html", "", "status = 1, width = 700, height = 600, resizable = 1");

   }
        

   //populate "all patients" list
   
   function getAllPatients() {

      $('#allpatients').html("");

      $('#loadingpatients').show();

      $.ajax({

	  
            url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients",

            type: "GET",

            dataType: "json",

            success: function(data, textStatus, jqXHR) {

               $('#loadingpatients').hide();

               var html = "<table>";

               for(var x = 0; x < data.length; x++) {

                  html += "<tr>";
                  html += "<td><a class=\"patient\" href=\"#" + data[x]._id + "\" onclick=\"getPatient(" + data[x]._id + ");updateBox()\">" + data[x].lastname + ", " + data[x].firstname + "</a></td>";
                  html += "<td><a class=\"error\" href=\"#" + data[x]._id + "\" onclick=\"delPatient(" + data[x]._id + ")\">(delete)</a></td>";
                  html += "</tr>";
               }

               html += "</table>";

               $('#allpatients').html(html);
			   

            }

      });

   }

	function updateBox(){
		$('#actionList').val("");
	}

	 function getAllActions() {
     $.ajax({

        
          url: "http://plato.cs.virginia.edu:8080/ApertureScience/actions",

          type: "GET",

          dataType: "json",

          success: function(data, textStatus, jqXHR) {

             var html = "";

             for(var x = 0; x < data.length; x++) {
                html += '<option value="' + data[x]._id + '">' + data[x].name + '</option>';
             }          

             $('#action').html(html);
          }

    });
	 }

   $(getAllPatients);
   $(getAllActions);
   

   var currentID = 1;
   function getPatient(id) 
   {   
		   
	  currentID = id;
      $('#loadingpatient').show();

      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id,

         type: "GET",

         dataType: "json",

         success: function(data, textStatus, jqXHR) {

            $('#loadingpatient').hide();

            display = (""+data.state).split(',');

            $('#name').val(data.lastname + ", " + data.firstname);

            $('#description').val(data.description);

            $('#cardiacstate').val(display[0]);

            $('#respiratorystate').val(display[1]);

            $('#renalstate').val(display[2]);
   
            $('#submit').val("Take action");
         }

      });

   }

   function delPatient(id) {
      $.ajax({
         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + id,
         type: "DELETE",
         success: function(data, textStatus, jqXHR) {
            getAllPatients();
         }
      });
   }

   //should set some global variable, or maybe hide the "take action" button and show a "create

   //patient" button, which would change the function from a POST to a PUT

   function createNew() {

      var wnd = window.open("create.html", "", "status = 1, width = 350, height = 300, resizable = 0");

   }



   //either POST or PUT depending on whether taking an action or creating a new patient

   function takeAction() {

      $('#loadingpatient').show();

   var actionId = $('#action').val();
   var e = $('#action')[0];
   var actionName = e.children[e.selectedIndex].innerText;
   
   
   $('#actionList').val(document.getElementById("actionList").value + actionName + " -> ");
   
      $.ajax({

         url: "http://plato.cs.virginia.edu:8080/ApertureScience/patients/" + currentID + "/" + actionId,

         type: "PUT",

         dataType: "json",

         success: function(data, textStatus, jqXHR) {

		 
		 
         getPatient(currentID);
         }

      });
   }

  </script>

  <style type="text/css">

   body {
	font-family: "Arial", "Sans serif";
	background-image: url(stethoscope.jpg);
}

   div#main { width: 60%; }

   div#main h2, div#main h3 { text-align: center; }

   div#main fieldset#patientlist { width: 25%; float: left; border-top-left-radius: 25px; border-bottom-left-radius: 25px; height: 330px; }

   div#main fieldset#patientlist div#allpatients { max-height: 285px; overflow: auto; }

   div#main fieldset#patientlist div#allpatients table a.error { font-size: smaller; color: red; font-weight: bold; }

   div#main fieldset#patientlist div#loadingpatients { display: none; text-align: center; }

   div#main fieldset#patientform { width: 65%; border-top-right-radius: 25px; border-bottom-right-radius: 25px; height: 330px; }
   
   div#main fieldset#patientform form { max-height: 300px; overflow: auto; }

   div#main fieldset#patientform td:first-child { font-weight: bold; }

   div#main fieldset#patientform div#loadingpatient { display: none; text-align: center; }

  </style>

 <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>

 <body>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Patient Simulator</li>
      <li class="TabbedPanelsTab" tabindex="0">Action Manager</li></ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <h2 align="center">WarGames Medical Simulation</h2>
        <h3 align="center">Patient Simulator</h3>
        <fieldset id="patientlist2">
          <legend>All Patients</legend>
          <div id="loadingpatients2"> Loading patients...<br>
            <img src="loading.gif" alt=""> </div>
          <div id="allpatients2"></div>
          <input type="button" value="Create new patient" onClick="createNew()">
        </fieldset>
        <fieldset id="patientform2">
          <legend>Current Patient</legend>
          <form>
            <table>
              <tr>
                <td>Name:</td>
                <td><input type="text" id="name2" name="name2" readonly="readonly"></td>
              </tr>
              <tr>
                <td>Description:</td>
                <td><input type="text" id="description2" name="description2" readonly="readonly"></td>
              </tr>
              <tr>
                <td>Cardiac state:</td>
                <td><input type="text" id="cardiacstate2" name="cardiacstate2" readonly="readonly"></td>
              </tr>
              <tr>
                <td>Respiratory state:</td>
                <td><input type="text" id="respiratorystate2" name="respiratorystate2" readonly="readonly"></td>
              </tr>
              <tr>
                <td>Renal state:</td>
                <td><input type="text" id="renalstate2" name="renalstate2" readonly="readonly"></td>
              </tr>
              <tr>
                <td>Action:</td>
                <td><select id="action2" name="action2">
                  <option value="1">Pain Medication</option>
                  <option value="2">Fluid bolus</option>
                  <option value="3">Oxygen</option>
                  <option value="4">Metoprolol</option>
                  <option value="5">Narcan</option>
                </select></td>
              </tr>
            </table>
            <input type="button" name="submit2" id="submit2" value="Take action" onClick="takeAction()">
            <br>
            <br>
            <b>Actions Taken: </b>
            <input type="text" id="actionList2" name="actionList2" readonly="readonly" size="50">
          </form>
          <div id="loadingpatient2"> Loading patient...<br>
            <img src="loading.gif" alt=""> </div>
        </fieldset>
      <a href="actionmanager.html">Go to action manager</a></div>
      <div class="TabbedPanelsContent">
        <div id="main">
          
          <h2 align="center">WarGames Medical Simulation</h2>
          <h3 align="center">Action Manager</h3>
          
          <fieldset id="actionlist">
            
            <legend>All Actions</legend>
            
            <div id="loadingactions">
              
              Loading actions...<br><img src="loading.gif">
              
            </div>
            
            <div id="allactions">
              
            </div>
            
            <input type="button" value="Create new action" onClick="createNew()">
            
          </fieldset>
          
          <fieldset id="actionform">
            
            <legend>Current Action</legend>
            
            <form>
              
              <table>
                
                <tr>
                  
                  <td style="height: 40px;">Name:</td>
                  
                  <td style="height: 40px;"><input type="text" id="name" name="name" readonly="readonly"></td>
                  
                  <td rowspan="2">
                    <div id="loadingaction">
                      
                      Loading action...<br><img src="loading.gif">
                      
                    </div>
                  </td>
                  
                </tr>
                
                <tr>
                  
                  <td style="height: 40px;">Description:</td>
                  
                  <td style="height: 40px;"><input type="text" id="description" name="description" readonly="readonly"></td>
                  
                  
                </tr>
                
              </table>
              
              <table id="actiondata">
                
                <tr>
                  
                  <th colspan="3">State Transitions</th>
                  
                </tr>
                
              </table>
              
            </form>
            
          </fieldset>
          
          <a href="index.html">Go to patient simulator</a>
          
        </div>
      </div>
    </div>
 </div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
  </script>
 </body>

</html>